<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>学校简介</title>
		<link rel="stylesheet" type="text/css" href="${s.base}/lib/layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="${s.base}/css/base/index.css" />
		<link rel="stylesheet" type="text/css" href="${s.base}/lib/dtree/dtree.css"/>
		<link rel="stylesheet" type="text/css" href="${s.base}/lib/dtree/font/iconfont.css"/>
		<link rel="stylesheet" type="text/css" href="${s.base}/css/base/darkBlue.css"/>
	</head>
	<style type="text/css">
		.layui-input-block{min-height:32px!important;}
		.layui-input, .layui-select, .layui-textarea{ height:32px;}
		.layui-question-ctn{width:100%;border-radius:2px;min-height:100px;box-sizing:border-box;}
		.layui-question-ctn .single-choice-list{width:calc(100% - 40px);height:auto;border:1px solid #ddd;padding:20px;border-radius:2px; margin-bottom:20px; color:#333; font-size:16px; position:relative;}
		.layui-question-ctn .single-choice-list textarea.single-choice-tit{width:calc(100% - 20px);resize:none;background:#f5f5f5;border:none; border-radius:10px; padding:10px;margin-bottom: 10px;}
		.layui-question-ctn .single-choice-list input.single-choice-tit{width:calc(100% - 20px);background:#f5f5f5;border:none;border-radius:4px;padding:0 10px;height:36px;line-height:36px;font-size:16px; margin-bottom: 10px;}
		.layui-question-ctn .single-choice-list .div-single-choice-tit{width:100%;height:24px;line-height:24px;font-size:16px; color:#333;}
		.layui-question-ctn .single-choice-list .single-choice-answer{width:100%; height:auto;}
		.layui-question-ctn .single-choice-list .single-choice-answer ul li{width:calc(100% - 90px); height:30px; line-height:30px;position:relative; padding-left:40px; margin:0 0 5px 0; padding-right:40px; color:#666!important;}
		.layui-question-ctn .single-choice-list .single-choice-answer ul li .single-choice-alph{width:40px;position:absolute;left:0;top:-3px; overflow-x:hidden;}
		.layui-question-ctn .single-choice-list .single-choice-answer ul li input.single-choice-answer-txt{width:calc(100% - 20px);height:32px; line-height:32px;background:#f5f5f5;border-radius:15px; border:none; padding:0 10px;}
		.layui-question-ctn .single-choice-list .single-choice-answer ul li .option-list{position:absolute;top:0; right:0;width:40px; margin-left:10px; text-align: center;}
		.layui-question-ctn .single-choice-list .single-choice-answer ul li .option-list i{display: inline-block;font-size:24px;cursor:pointer;color:#ff6666;}
		.layui-question-ctn .single-choice-list .single-choice-answer ul li span.answer-line{display:inline-block;height:30px; line-height:35px;}
		.layui-question-ctn .single-choice-list .single-choice-answer textarea.shortAnswer{width:100%;resize:none;background:#fff;border-radius:10px;padding:10px;box-sizing:border-box;border:1px solid #ddd;margin-top:0;}
		.layui-btn-addoption{ margin:10px 0 20px 0;background-color:#fb9816!important;}
		.layui-form-radio{ padding-right:0; margin:5px 0 0 0;}
		.layui-form-radio>i{ margin-right:4px; padding-top:3px;}
		.layui-question-operabtn{width:200px; height:auto; position:absolute;top:5px;right:0;}
		.layui-question-operabtn ul li{width:45px;height:32px;background:#5d9cec;color:#fff;font-size:14px;line-height:32px;text-align:center;cursor:pointer; float:left; margin-right:5px;}
		.overbtn-oper:hover{border:1px solid #5d9cec!important;}
		.layui-question-operabtn{display:none;}
		.overbtn-oper:hover .layui-question-operabtn{display:block;}
		.layui-question-ctn .single-choice-list .single-choice-answer p.short-answer-textarea{width:100%;max-height:100px;color:#666; padding:3px 10px; box-sizing: padding-box; font-size:14px;}
	</style>
	<body class="wrap-container clearfix">
	<div class="column-content-detail">
		<form class="layui-form" action="" id="layui-form">
			<div class="layui-form-item">
				<label class="layui-form-label">题型：</label>
				<div class="layui-input-block">
					<button type="button" class="layui-btn layui-btn-normal layui-btn-xs layui-topic-btn" data-type-id="1"><i class="iconfont marr5">&#xe611;</i><span>单选题</span></button>
					<button type="button" class="layui-btn layui-btn-normal layui-btn-xs layui-topic-btn" data-type-id="2"><i class="iconfont marr5">&#xe611;</i><span>多选题</span></button>
					<button type="button" class="layui-btn layui-btn-normal layui-btn-xs layui-topic-btn" data-type-id="3"><i class="iconfont marr5">&#xe611;</i><span>简答题</span></button>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">问卷标题：</label>
				<div class="layui-input-block">
					<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item" id="wj">
				<label class="layui-form-label">问卷题目：</label>
				<div class="layui-input-block" >
					<div class="layui-question-ctn">
						<!--//单选-->
						<div class="single-choice-list" data-type="1">
							<div class="layui-question-operabtn">
								<ul>
									<li>上移</li>
									<li>下移</li>
									<li class="editopic">编辑</li>
									<li class="deletopic">删除</li>
								</ul>
							</div>
							<input type="text" class="single-choice-tit"  placeholder="请单击此处输入题目标题" >
							<div class="div-single-choice-tit" style=" display:none;">1、<span class="div-single-choice-tit-name">你觉得老师上课怎么样</span><span class="base-color-bule">[单选题]</span></div>
							<div class="single-choice-answer" >
								<ul>
									<li>
										<div class="single-choice-alph"><input type="radio" name="sex" value="A." title="A."></div>
										<input type="text" placeholder="请输入标题" class="single-choice-answer-txt" >
										<span class="answer-line" style="display:none;">很不错</span>
										<div class="option-list"><i class="iconfont">&#xe654;</i></div>
									</li>
									<li>
										<div class="single-choice-alph"><input type="radio" name="sex" value="B." title="B."></div>
										<input type="text" placeholder="请输入标题" class="single-choice-answer-txt">
										<span class="answer-line" style="display:none;">很一般</span>
										<div class="option-list"><i class="iconfont">&#xe654;</i></div>
									</li>
								</ul>
								<button type="button" class="layui-btn layui-btn-normal layui-btn-xs layui-btn-addoption" style="margin-left:50px;"><i class="iconfont marr5">&#xe611;</i>添加选项</button>
							</div>
							<div class="layui-form-item clearfix" style="text-align:center; margin-bottom:0;">
								<button class="layui-btn layui-btn-normal layui-over-btn" type="button" >完成编辑</button>
								<button type="button" id="" class="layui-btn layui-btn-primary">取消编辑</button>
							</div>
						</div>
						<!--//多选-->
						<!--<div class="single-choice-list" data-type="2">-->
							<!--<div class="layui-question-operabtn">-->
								<!--<ul>-->
									<!--<li>上移</li>-->
									<!--<li>下移</li>-->
									<!--<li class="editopic">编辑</li>-->
									<!--<li class="deletopic">删除</li>-->
								<!--</ul>-->
							<!--</div>-->
							<!--<input type="text" class="single-choice-tit"  placeholder="请单击此处输入题目标题">-->
							<!--<div class="single-choice-answer">-->
								<!--<ul>-->
									<!--<li>-->
										<!--<div class="single-choice-alph"><input type="checkbox" name="" lay-skin="primary" title="A" value="A"></div>-->
										<!--<input type="text" placeholder="请输入标题" class="single-choice-answer-txt">-->
										<!--<div class="option-list"><i class="iconfont">&#xe654;</i></div>-->
									<!--</li>-->
									<!--<li>-->
										<!--<div class="single-choice-alph"><input type="checkbox" name="" lay-skin="primary" title="B" value="B"></div>-->
										<!--<input type="text" placeholder="请输入标题" class="single-choice-answer-txt">-->
										<!--<div class="option-list"><i class="iconfont">&#xe654;</i></div>-->
									<!--</li>-->
								<!--</ul>-->
								<!--<button type="button" class="layui-btn layui-btn-normal layui-btn-xs layui-btn-addoption" style="margin-left:50px;"><i class="iconfont marr5">&#xe611;</i>添加选项</button>-->
							<!--</div>-->
							<!--<div class="layui-form-item clearfix" style="text-align:center; margin-bottom:0;">-->
								<!--<button class="layui-btn layui-btn-normal  layui-over-btn" type="button">完成编辑</button>-->
								<!--<button type="button" id="" class="layui-btn layui-btn-primary">取消编辑</button>-->
								<!--<button type="button" style="display: none;" id="" class="layui-btn layui-btn-primary"></button>-->
							<!--</div>-->
						<!--</div>-->
						<!--//简答题-->
						<!--<div class="single-choice-list" data-type="3">-->
							<!--<div class="layui-question-operabtn">-->
								<!--<ul>-->
									<!--<li>上移</li>-->
									<!--<li>下移</li>-->
									<!--<li class="editopic">编辑</li>-->
									<!--<li class="deletopic">删除</li>-->
								<!--</ul>-->
							<!--</div>-->
							<!--<input type="text" class="single-choice-tit"  placeholder="请单击此处输入题目标题">-->
							<!--<div class="div-single-choice-tit" style=" display: none">1、<span class="div-single-choice-tit-name"></span><span class="base-color-bule">[简答题]</span></div>-->
							<!--<div class="single-choice-answer">-->
								<!--<textarea class="shortAnswer" rows="2" placeholder="请单击此处输入题目标题"></textarea>-->
								<!--<p class="short-answer-textarea" style="display: none;">请单击此处输入题目标题请单击此处输入题目标题请单击此处输入题目标题</p>-->
							<!--</div>-->
							<!--<div class="layui-form-item clearfix" style="text-align:center; margin-bottom:0;">-->
								<!--<button class="layui-btn layui-btn-normal  layui-over-btn" type="button">完成编辑</button>-->
								<!--<button type="button"  class="layui-btn layui-btn-primary">取消编辑</button>-->
								<!--<button type="button" style="display: none;"  class="layui-btn layui-btn-primary"></button>-->
							<!--</div>-->
						<!--</div>-->
					</div>
				</div>
			</div>
		</form>
	</div>

	<script src="${s.base}/lib/layui/layui.js" type="text/javascript" charset="utf-8"></script>
	<script src="${s.base}/js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="${s.base}/lib/KnifeZ/ace/ace.js" type="text/javascript" charset="utf-8"></script>
		<script>

            layui.use(['form','jquery','fileUtil','dialog','layer','layedit','baseutil'], function() {
                var $ = layui.jquery,
					form=layui.form,
                    fileUtil = layui.fileUtil,
                    baseutil = layui.baseutil,
                    layer = layui.layer,
                    layedit = layui.layedit,
                    dialog = layui.dialog;
               		 form.render();
				//点击增加题型按钮
            $("#layui-form").on("click",".layui-topic-btn",function(){
                var idType=$(this).attr("data-type-id");
                var topicType=$(this).find("span").text();
                var topicNum=$(".layui-question-ctn .single-choice-list").length;
                var str="";
                var choose="";
                var prmcheck="";
                if (!topicNum) {
                    topicNum=1;
				}else{
                    topicNum= topicNum*1+1;
				}
				if(idType<3){
                    if (idType == 1) {
                        choose ="radio";
                    }
                    if (idType==2) {
                        choose="checkbox";
                        prmcheck="primary";
                    }
                 str='<div class="single-choice-list" data-type="'+idType+'">' +
                    '<div class="layui-question-operabtn">' +
                    '<ul>' +
                    '<li class="sort-asc">上移</li>' +
                    '<li class="sort-down">下移</li>' +
                    '<li class="editopic">编辑</li>' +
                    '<li class="deletopic">删除</li>' +
                    '</ul>' +
                    '</div>' +
                    '<input type="text" class="single-choice-tit"  placeholder="请单击此处输入题目标题" >' +
                    '<div class="div-single-choice-tit" style=" display:none;"><span class="topicNum">'+topicNum+'</span>、<span class="div-single-choice-tit-name"></span><span class="base-color-bule">['+topicType+']</span></div>' +
                    '<div class="single-choice-answer" >' +
                    '<ul>' +
                    '<li>' +
                    '<div class="single-choice-alph"><input type="'+choose+'" name="sex" value="A." title="A." lay-skin="'+prmcheck+'"></div>' +
                    '<input type="text" placeholder="请输入标题" class="single-choice-answer-txt" >' +
                    '<span class="answer-line" style="display:none;"></span>' +
                    '<div class="option-list"><i class="iconfont">&#xe654;</i></div>' +
                    '</li>' +
                    '<li>' +
                    '<div class="single-choice-alph"><input type="'+choose+'" name="sex" value="B." title="B." lay-skin="'+prmcheck+'"></div>' +
                    '<input type="text" placeholder="请输入标题" class="single-choice-answer-txt">' +
                    '<span class="answer-line" style="display:none;"></span>' +
                    '<div class="option-list"><i class="iconfont">&#xe654;</i></div>' +
                    '</li>' +
                    '</ul>' +
                    '\<button type="button" class="layui-btn layui-btn-normal layui-btn-xs layui-btn-addoption" style="margin-left:50px;"><i class="iconfont marr5">&#xe611;</i>添加选项</button>' +
                    '</div>' +
                    '<div class="layui-form-item clearfix" style="text-align:center; margin-bottom:0;">' +
                    '<button class="layui-btn layui-btn-normal layui-over-btn" type="button" >完成编辑</button>' +
                    '<button type="button" id="" class="layui-btn layui-btn-primary">取消编辑</button>' +
                    '</div>' +
                    '</div>';
                }
                else(
                    str='<div class="single-choice-list" data-type="'+idType+'">' +
						'<div class="div-single-choice-tit" style=" display: none"><span class="topicNum">'+topicNum+'</span>、<span class="div-single-choice-tit-name"></span><span class="base-color-bule">['+topicType+']</span></div>'+
                        '<div class="layui-question-operabtn">' +
                        '<ul>'+
                        '<li class="sort-asc">上移</li>' +
                        '<li class="sort-down">下移</li>' +
                        '<li class="editopic">编辑</li>' +
                        '<li class="deletopic">删除</li>' +
                        '</ul>'+
                        '</div>'+
                        '<input type="text" class="single-choice-tit"  placeholder="请单击此处输入题目标题">' +
                        '<div class="single-choice-answer">' +
                        '<textarea class="shortAnswer" rows="2" placeholder="请单击此处输入题目标题"></textarea>' +
                        '<p class="short-answer-textarea" style="display: none;"></p>'+
                        '</div>' +
                        '<div class="layui-form-item clearfix" style="text-align:center; margin-bottom:0;">' +
                        '<button class="layui-btn layui-btn-normal  layui-over-btn" type="button">完成编辑</button>' +
                        '<button type="button" id="" class="layui-btn layui-btn-primary">取消编辑</button>' +
                        '<button type="button" style="display: none;" id="" class="layui-btn layui-btn-primary"></button>' +
                        '</div>'+
                        '</div>'
				)
                $(".layui-question-ctn").append(str);
                form.render();
			})








      			//获取题型序号
				var numOp=$(0)
                $("#wj").on("click",".option-list",function(){
                    console.log(1);
                    $(this).parent("li").remove();
				});
				$("#wj").on("click",".layui-btn-addoption",function(){
                    var sort = '@';
                    if ($(this).parents(".single-choice-answer").find("ul li:last-child").find(".single-choice-alph input").val()) {
                        sort = $(this).parents(".single-choice-answer").find("ul li:last-child").find(".single-choice-alph input").val().slice(0, 1);
                    }
                    console.log(sort)
                    var sortCode = sort.charCodeAt();
                    //最多A-Z
                    if (sortCode > 89) return
					console.log(sortCode);
                    var newsort = String.fromCharCode(sortCode + 1);
                    console.log(sortCode + 1);
					var type=$(this).parents(".single-choice-list").attr("data-type");
					var choose="";
					var prmcheck="";
					if (type == 1) {
                        choose ="radio";
					}
                    if (type==2) {
                        choose="checkbox";
                        prmcheck="primary";
                    }
					var str='<li>' +
                        	'<div class="single-choice-alph"><input type="'+choose+'" name="" value="'+newsort+'." title="' + newsort + '." lay-skin="'+prmcheck+'"></div>' +
                    		'<input type="text" placeholder="请输入标题" class="single-choice-answer-txt" >' +
                   		 	'<span class="answer-line" style="display:none;"></span>' +
                    		'<div class="option-list"><i class="iconfont">&#xe654;</i></div>' +
                    		'</li>';
                    var append = $(this).parent(".single-choice-answer").find("ul").append(str);
                    form.render();

				})
				//完成编辑
                $("#wj").on("click",".layui-over-btn",function(){
                    var topicName=$(this).parents(".single-choice-list").find("input.single-choice-tit").val();
                    $(this).parents(".single-choice-list").find(".div-single-choice-tit .div-single-choice-tit-name").text(topicName);
                    var shortAnswer=$(this).parents(".single-choice-list").find("textarea.shortAnswer").val();
                    $(this).parents(".single-choice-list").find("p.short-answer-textarea").text(shortAnswer);
                    $(this).parent(".layui-form-item").hide();
                    $(this).parents(".single-choice-list").find("input.single-choice-tit").hide();
                    $(this).parents(".single-choice-list").find(".div-single-choice-tit").show();
                    $(this).parents(".single-choice-list").find(".layui-btn-addoption").hide();
                    $(this).parents(".single-choice-list").find("textarea.shortAnswer").hide();
                    $(this).parents(".single-choice-list").find("p.short-answer-textarea").show();
                    $(this).parents(".single-choice-list").find(".single-choice-answer ul li").each(function(){
                        var optionName=$(this).find("input.single-choice-answer-txt").val();
                        $(this).find("span.answer-line").text(optionName);
                        $(this).find("input.single-choice-answer-txt").hide();
                        $(this).find("span.answer-line").show();
                        $(this).find(".option-list").hide();
                    });
                    $(this).parents(".single-choice-list").addClass("overbtn-oper");

                })
                //保存后再编辑题目
                $("#wj").on("click",".editopic",function(){
                    $(this).parents(".single-choice-list").find(".layui-form-item").show();
                    $(this).parents(".single-choice-list").find("input.single-choice-tit").show();
                    $(this).parents(".single-choice-list").find(".div-single-choice-tit").hide();
                    $(this).parents(".single-choice-list").find(".layui-btn-addoption").show();
                    $(this).parents(".single-choice-list").find("textarea.shortAnswer").show();
                    $(this).parents(".single-choice-list").find("p.short-answer-textarea").hide();
                    $(this).parents(".single-choice-list").find(".single-choice-answer ul li").each(function(){
                        $(this).find("input.single-choice-answer-txt").show();
                        $(this).find("span.answer-line").hide();
                        $(this).find(".option-list").show();
                    });
                    $(this).parents(".single-choice-list").removeClass("overbtn-oper");

                })
                //删除题目
				$(".layui-question-operabtn").on("click",".deletopic",function(){
				    $(this).parents(".single-choice-list").remove();
				})

				//上移下移
                $("#wj").on('click', '.sort-down', function(){
                    //判断是否有下一个节点
                    if($(this).parents('.single-choice-list').nextAll().length > 0){
						var num=$(this).parents('.single-choice-list').index();
                        $(this).parents('.single-choice-list').next().find("span.topicNum").text(num*1+1);
                        $(this).parents('.single-choice-list').find("span.topicNum").text(num*1+2);
                        $(this).parents('.single-choice-list').next().after($(this).parents('.single-choice-list').prop('outerHTML'));
                        $(this).parents('.single-choice-list').remove();

                    }
                }).on('click', '.sort-asc', function(){
                    //判断是否有上一个节点
                    if($(this).parents('.single-choice-list').prevAll().length > 0){
                        var num=$(this).parents('.single-choice-list').index();
                        $(this).parents('.single-choice-list').prev().find("span.topicNum").text(num*1+1);
                        $(this).parents('.single-choice-list').find("span.topicNum").text(num);
                        $(this).parents('.single-choice-list').prev().before($(this).parents('.single-choice-list').prop('outerHTML'));
                        $(this).parents('.single-choice-list').remove();
                    }
                })

            });

		</script>
	</body>
</html>